{% extends 'base.html' %}
{% load staticfiles %}
{% load widget_tweaks %}
{% block aside %}
    <div style="height: 1px;width: 1px;overflow: hidden;">
        <audio controls="controls" height="100" width="100" class="nn">
            <!-- <source src="./mp3/童话镇.mp3" type="audio/mp3" /> -->
        </audio>
    </div>
      <section class="vbox" id="bjax-el">
        <section class="scrollable wrapper-lg">
          <div class="row">
            <div class="col-sm-8">
              <div class="panel wrapper-lg">
                <div class="row">
                  <div class="col-sm-5">
                    <img src="{{ music.music_cover.url }}" class="img-full m-b">
                  </div>
                  <div class="col-sm-7">
                    <h2 class="m-t-none text-black">{{ music.name }}</h2>
                    <div class="clearfix m-b-lg">
                        {% if user.is_authenticated %}
                          <a href="{% url 'user:show_another' music.user_id %}" class="thumb-sm pull-left m-r">
                            <img src="{{ music.user.avatar.url }}" class="img-circle">
                          </a>
                          <div class="clear">
                            <a href="{% url 'user:show_another' music.user_id %}" class="text-info">{{ music.user.username }}</a>
                        {% else %}
                          <a href="javascript:void(0)" onclick="toast_warning()" class="thumb-sm pull-left m-r">
                            <img src="{{ music.user.avatar.url }}" class="img-circle">
                          </a>
                          <div class="clear">
                            <a href="javascript:void(0)" onclick="toast_warning()" class="text-info">{{ music.user.username }}</a>
                        {% endif %}
                        <small class="block text-muted">{{ music.user.fan_count }} 粉丝 / {{ music.user.follow_count }} 关注</small>
                      </div>
                    </div>
                    <div class="m-b-lg">
                      <a class="btn btn-info" onclick="isplay(event)" videoid="{{ music.id }}">播放</a>
                      <a class="btn btn-default">{{ comment_list.count }}  评论</a>
                    {% if user.is_authenticated %}
                      <a onclick="like('{{ music.id }}')" id = "like" class="btn btn-default">{{ music.like_count }} 点赞</a>
                      <a onclick="add_favorite_music('{{ music.id }}')" id="toast-test" class="btn btn-default">收藏</a>
                        {% if perms.music.download and music.is_download == 0 %}
                          <a class="btn btn-default" href="{{ music.music_src.url }}" download="{{ music.name }}">下载</a>
                        {% elif perms.music.download and music.is_download == 1 %}
                          <a class="btn btn-default" onclick="show_toast('warning','该音乐暂时不允许下载', '{{ user.avatar.url }}')">下载</a>
                        {% elif not perms.music.download %}
                          <a class="btn btn-default" onclick="show_toast('warning','您需要实名认证之后才能下载', '{{ user.avatar.url }}')">下载</a>
                        {% endif %}
                    {% else %}
                      <a onclick="toast_warning()" class="btn btn-default">{{ music.like_count }} 点赞</a>
                      <a onclick="toast_warning()" class="btn btn-default">收藏</a>
                      <a onclick="toast_warning()" class="btn btn-default">下载</a>
                    {% endif %}

                    </div>
                    <div>
                      流派: <a class="badge bg-light">{{ music.category }}</a>
                    </div>
                  </div>
                </div>
                <div class="m-t">
                  <p>{{ music.summary }}</p>
                </div>
                <h4 class="m-t-lg m-b">播放列表</h4>
                <ul class="list-group list-group-lg">
                  {% for author_music in author_music_list %}
                  <li class="list-group-item">
                    <div class="pull-right m-l">
                      {% if user.is_authenticated %}
                          {% if perms.music.download and music.is_download == 0 %}
                            <a href="{{ author_music.music_src.url }}" download="{{ author_music.name }}" class="m-r-sm">
                                <i class="icon-cloud-download"></i>
                            </a>
                          {% elif perms.music.download and music.is_download == 1 %}
                            <a href="javascript:void(0)" onclick="show_toast('warning','该音乐暂时不允许下载', '{{ user.avatar.url }}')" class="m-r-sm">
                                <i class="icon-cloud-download"></i>
                            </a>
                          {% elif not perms.music.download %}
                            <a href="javascript:void(0)" onclick="show_toast('warning','您需要实名认证之后才能下载', '{{ user.avatar.url }}')" class="m-r-sm">
                                <i class="icon-cloud-download"></i>
                            </a>
                          {% endif %}
                      {% else %}
                          <a href="javascript:void(0)" onclick="toast_warning()" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                      {% endif %}

                      <a href="#" class="m-r-sm"><i class="icon-plus"></i></a>
                      <a href="#"><i class="icon-close"></i></a>
                    </div>
                    <a href="#" class="jp-play-me m-r-sm pull-left" onclick="isplay(event)" videoid={{ author_music.id }}>
                      <i class="icon-control-play text music-icon"></i>
                      <i class="icon-control-pause text-active"></i>
                    </a>
                    <div class="clear text-ellipsis">
                      <span>{{ author_music.name }}</span>
                      <span class="text-muted"> -- 04:35</span>
                    </div>
                  </li>
                  {% endfor %}
                </ul>
                <h4 class="m-t-lg m-b">共 {{ comment_list.count }} 条评论</h4>
                <section class="comment-list block">
                {% for comment in comment_list %}
                    {% if user.is_authenticated %}
                      <article id="comment-id-1" class="comment-item">
                        <a href="{% url 'user:show_another' comment.user.id %}" class="pull-left thumb-sm">
                          <img src="{{ comment.user.avatar.url }}" class="img-circle">
                        </a>
                        <section class="comment-body m-b">
                          <header>
                            <a href="{% url 'user:show_another' comment.user.id %}"><strong>{{ comment.user.username }}</strong></a>
                            <label class="label bg-info m-l-xs">Editor</label>
                            <span class="text-muted text-xs block m-t-xs">
                              {{ comment.collect_time }}
                            </span>
                          </header>
                          <div class="m-t-sm">{{ comment.content }}</div>
                        </section>
                      </article>
                    {% else %}
                        <article id="comment-id-1" class="comment-item">
                        <a href="javascript:void(0)" onclick="toast_warning()" class="pull-left thumb-sm">
                          <img src="{{ comment.user.avatar.url }}" class="img-circle">
                        </a>
                        <section class="comment-body m-b">
                          <header>
                            <a href="javascript:void(0)" onclick="toast_warning()"><strong>{{ comment.user.username }}</strong></a>
                            <label class="label bg-info m-l-xs">Editor</label>
                            <span class="text-muted text-xs block m-t-xs">
                              {{ comment.collect_time }}
                            </span>
                          </header>
                          <div class="m-t-sm">{{ comment.content }}</div>
                        </section>
                      </article>
                    {% endif %}
                  {% endfor %}
                </section>
                <h4 class="m-t-lg m-b">留下你的评论吧</h4>
                <form action="{% url 'comment:add_music_comment' music.id %}?next={{ request.path }}" method="post">
                {% csrf_token %}
                  <div class="form-group">
                    {{ form.content }}
                    {{ error }}
                  </div>
                  <div class="form-group">
                  {% if user.is_authenticated %}
                    <button type="submit" id="m-reply" class="btn btn-success">提交我的评论</button>
                  {% else %}
                    <button type="button" onclick="toast_warning()" class="btn btn-success">提交我的评论</button>
                  {% endif %}
                  </div>
                </form>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="panel panel-default">
                <div class="panel-heading">最新推荐</div>
                <div class="panel-body">
                    {% for suggestion in suggestion_list %}
                  <article class="media">
                    <a href="{{ suggestion.get_absolute_url }}" class="pull-left thumb-md m-t-xs">
                      <img src="{{ suggestion.music_cover.url }}">
                    </a>
                    <div class="media-body">
                      <a href="{{ suggestion.get_absolute_url }}" class="font-semibold">{{ suggestion.name }}</a>
                      <div class="text-xs block m-t-xs"><a href="#">{{ suggestion.user.username }}</a> 发布于 {{ suggestion.upload_time }}</div>
                    </div>
                  </article>
                    {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </section>
      <script src="{% static 'js/jquery.min.js' %}"></script>
      <script type="text/javascript">
         function add_favorite_music(music_id){
            $.post("{% url 'favorite:add_favorite_music' %}",{
                'music_id': music_id,
                'user_id': '{{ user.id }}',
            },
             function(data) {
                if (data.status === 'ok') {
                    show_toast('success', data.msg, '{{ user.avatar.url }}')
                }
                else {
                    show_toast('warning', data.msg, '{{ user.avatar.url }}')
                }
            });
        }
    </script>
      <script type="text/javascript">
        var mp3_list = [];
        {% for author_music in author_music_list %}
            var author = '{{ author_music.user.username }}';
            var url = '{{ author_music.music_src.url }}';
            var name = '{{ author_music.name }}';
            var video_id = '{{ author_music.id }}';

            var mp3 = {'author': author, 'url': url, 'name': name, 'videoid': video_id};
            mp3_list.push(mp3);
        {% endfor %}
      localStorage.setItem("mp3list", JSON.stringify(mp3_list));
    </script>
    <script type="text/javascript">
      function like(music_id){
          $.post("{% url 'music:music_like' %}",{
              'music_id': music_id,
              'user_id': '{{ user.id }}',
          },
          function(data) {
              var like_count = data.like_count;
              if (data.status === 'ok'){
                  show_toast('success', '点赞成功!','{{ user.avatar.url }}');
                  $('#like').text(like_count.toString() + ' 点赞');
              }
              else {
                  show_toast('warning', '不允许重复点赞!','{{ user.avatar.url }}');
                  $('#like').text(like_count.toString() + ' 点赞');
              }
          });
      }
    </script>
    <script type="text/javascript">
        $('#m-reply').click(function () {
            show_toast('success', '回复成功!', '{{ user.avatar.url }}')
        })
    </script>
{% endblock aside %}